<template>
  <div class="home-news">
    <div class="section-header">
      <h2 class="section-title">新闻中心</h2>
      <p class="section-desc">了解公司最新动态和行业资讯</p>
    </div>
    <div class="news-container">
      <el-row :gutter="30">
        <el-col :span="24">
          <div class="news-list">
            <div v-for="(news, index) in newsList" :key="news.id" class="news-item" :class="{ 'with-border': index !== newsList.length - 1 }">
              <div class="news-date">
                <span class="day">{{ formatDay(news.createTime) }}</span>
                <span class="month">{{ formatMonth(news.createTime) }}</span>
              </div>
              <div class="news-content">
                <router-link :to="{ name: 'NewsDetail', params: { id: news.id }}" class="news-title">
                  {{ news.title }}
                </router-link>
                <p class="news-desc">{{ news.description || '暂无描述' }}</p>
                <div class="news-meta">
                  <span class="category">{{ news.category || '公司新闻' }}</span>
                  <span class="time">{{ formatTime(news.createTime) }}</span>
                </div>
              </div>
              <div class="news-action">
                <router-link :to="{ name: 'NewsDetail', params: { id: news.id }}" class="read-more">
                  <span>阅读全文</span>
                  <el-icon><ArrowRight /></el-icon>
                </router-link>
              </div>
            </div>
          </div>
          <div class="view-more">
            <router-link to="/news" class="more-link">
              <span>查看更多新闻</span>
              <el-icon><ArrowRight /></el-icon>
            </router-link>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getLatestNews } from '@/api/home'
import { ArrowRight } from '@element-plus/icons-vue'

const newsList = ref([])

const fetchLatestNews = async () => {
  try {
    const res = await getLatestNews()
    newsList.value = res.data || []
  } catch (error) {
    console.error('获取最新新闻失败:', error)
  }
}

// 格式化日期
const formatDay = (date) => {
  return new Date(date).getDate().toString().padStart(2, '0')
}

const formatMonth = (date) => {
  const months = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC']
  return months[new Date(date).getMonth()]
}

const formatTime = (date) => {
  return new Date(date).toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  })
}

onMounted(() => {
  fetchLatestNews()
})
</script>

<style lang="scss" scoped>
.home-news {
  padding: 80px 0;
  background: #fff;
  
  .section-header {
    text-align: center;
    margin-bottom: 60px;
    
    .section-title {
      font-size: 42px;
      font-weight: 800;
      color: #2c3e50;
      margin-bottom: 20px;
      position: relative;
      display: inline-block;
      
      &::after {
        content: '';
        position: absolute;
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%);
        width: 80px;
        height: 4px;
        background: linear-gradient(90deg, #ff6b6b, #ff8e8e);
        border-radius: 2px;
      }
    }
    
    .section-desc {
      font-size: 18px;
      color: #6c757d;
      max-width: 600px;
      margin: 0 auto;
      line-height: 1.6;
    }
  }

  .news-container {
    max-width: 1000px;
    margin: 0 auto;
  }

  .news-list {
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    overflow: hidden;
  }

  .news-item {
    display: flex;
    align-items: flex-start;
    padding: 30px;
    transition: all 0.3s ease;
    
    &.with-border {
      border-bottom: 1px solid #eee;
    }
    
    &:hover {
      background: #f8f9fa;
      
      .news-title {
        color: #ff6b6b;
      }
      
      .read-more {
        opacity: 1;
        transform: translateX(0);
      }
    }
    
    .news-date {
      flex-shrink: 0;
      width: 80px;
      text-align: center;
      padding: 10px;
      background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
      border-radius: 10px;
      margin-right: 25px;
      
      .day {
        display: block;
        font-size: 28px;
        font-weight: 700;
        color: #fff;
        line-height: 1;
        margin-bottom: 5px;
      }
      
      .month {
        display: block;
        font-size: 14px;
        color: rgba(255, 255, 255, 0.9);
        text-transform: uppercase;
      }
    }
    
    .news-content {
      flex-grow: 1;
      margin-right: 20px;
      
      .news-title {
        display: block;
        font-size: 20px;
        font-weight: 600;
        color: #2c3e50;
        text-decoration: none;
        margin-bottom: 12px;
        transition: color 0.3s ease;
        
        &:hover {
          color: #ff6b6b;
        }
      }
      
      .news-desc {
        font-size: 15px;
        color: #6c757d;
        line-height: 1.6;
        margin-bottom: 15px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      
      .news-meta {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #adb5bd;
        
        .category {
          padding: 3px 10px;
          background: rgba(255, 107, 107, 0.1);
          color: #ff6b6b;
          border-radius: 15px;
          margin-right: 15px;
        }
      }
    }
    
    .news-action {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      
      .read-more {
        display: inline-flex;
        align-items: center;
        color: #ff6b6b;
        text-decoration: none;
        font-weight: 600;
        opacity: 0.8;
        transform: translateX(-10px);
        transition: all 0.3s ease;
        
        span {
          margin-right: 8px;
        }
        
        .el-icon {
          transition: transform 0.3s ease;
        }
        
        &:hover {
          opacity: 1;
          
          .el-icon {
            transform: translateX(5px);
          }
        }
      }
    }
  }

  .view-more {
    text-align: center;
    margin-top: 40px;
    
    .more-link {
      display: inline-flex;
      align-items: center;
      padding: 12px 30px;
      background: linear-gradient(45deg, #ff6b6b, #ff8e8e);
      color: #fff;
      text-decoration: none;
      border-radius: 25px;
      font-weight: 600;
      transition: all 0.3s ease;
      box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
      
      span {
        margin-right: 8px;
      }
      
      .el-icon {
        transition: transform 0.3s ease;
      }
      
      &:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
        
        .el-icon {
          transform: translateX(5px);
        }
      }
    }
  }
  
  @media (max-width: 768px) {
    padding: 60px 0;
    
    .section-header {
      margin-bottom: 40px;
      
      .section-title {
        font-size: 32px;
      }
      
      .section-desc {
        font-size: 16px;
        padding: 0 20px;
      }
    }
    
    .news-item {
      flex-direction: column;
      padding: 20px;
      
      .news-date {
        margin-right: 0;
        margin-bottom: 15px;
      }
      
      .news-content {
        margin-right: 0;
        margin-bottom: 15px;
        
        .news-title {
          font-size: 18px;
        }
      }
      
      .news-action {
        width: 100%;
        justify-content: flex-end;
      }
    }
  }
}
</style> 